<template>
  <div class="form">
    <fx-card title="基础用法">
      <fx-form>
        <fx-form-item label="输入框" prop="input">
          <fx-input v-model="baseFormData.input"></fx-input>
        </fx-form-item>
        <fx-form-item label="多选" prop="checkboxGroup">
          <fx-checkbox-group v-model="baseFormData.checkboxGroup">
            <fx-checkbox label="备选项 A"></fx-checkbox>
            <fx-checkbox label="备选项 B" disabled></fx-checkbox>
            <fx-checkbox label="备选项 C"></fx-checkbox>
            <fx-checkbox label="备选项 D"></fx-checkbox>
            <fx-checkbox label="备选项 E"></fx-checkbox>
          </fx-checkbox-group>
        </fx-form-item>
        <fx-form-item label="选择" prop="checkbox">
          <fx-checkbox label="是否选中" v-model="baseFormData.checkbox"></fx-checkbox>
        </fx-form-item>
        <fx-form-item label="单选" prop="radio">
          <fx-radio v-model="baseFormData.groupRadio" label="1">备选项1</fx-radio>
          <fx-radio v-model="baseFormData.groupRadio" label="2">备选项2</fx-radio>
        </fx-form-item>
        <fx-form-item>
          <fx-button @click="baseSend">发送</fx-button>
        </fx-form-item>
      </fx-form>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="对齐方式">
      <fx-radio-group v-model="alignType">
        <fx-radio-button label="left">靠左对齐</fx-radio-button>
        <fx-radio-button label="right">靠右对齐</fx-radio-button>
        <fx-radio-button label="top">靠上对齐</fx-radio-button>
      </fx-radio-group>
      <fx-slider v-model="labelWidth" width="300"/>
      <fx-form :label-position="alignType" :label-width="labelWidth">
        <fx-form-item label="输入框" prop="input">
          <fx-input v-model="alignFormData.input"></fx-input>
        </fx-form-item>
        <fx-form-item label="多选" prop="checkboxGroup">
          <fx-checkbox-group v-model="alignFormData.checkboxGroup">
            <fx-checkbox label="备选项 A"></fx-checkbox>
            <fx-checkbox label="备选项 B" disabled></fx-checkbox>
            <fx-checkbox label="备选项 C"></fx-checkbox>
            <fx-checkbox label="备选项 D"></fx-checkbox>
            <fx-checkbox label="备选项 E"></fx-checkbox>
          </fx-checkbox-group>
        </fx-form-item>
        <fx-form-item label="选择" prop="checkbox">
          <fx-checkbox label="是否选中" v-model="alignFormData.checkbox"></fx-checkbox>
        </fx-form-item>
        <fx-form-item label="单选" prop="radio">
          <fx-radio v-model="alignFormData.groupRadio" label="1">备选项1</fx-radio>
          <fx-radio v-model="alignFormData.groupRadio" label="2">备选项2</fx-radio>
        </fx-form-item>
        <fx-form-item>
          <fx-button>发送</fx-button>
        </fx-form-item>
      </fx-form>
      <template #hide>
        <pre v-highlight="align"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="验证规则">
      <fx-form :rules="rules" ref="formDom">
        <fx-form-item label="输入框" prop="input">
          <fx-input v-model="rulesFormData.input"></fx-input>
        </fx-form-item>
        <fx-form-item label="数字框" prop="inputNumber">
          <fx-input-number v-model="rulesFormData.inputNumber"></fx-input-number>
        </fx-form-item>
        <fx-form-item label="多选" prop="checkboxGroup">
          <fx-checkbox-group v-model="rulesFormData.checkboxGroup">
            <fx-checkbox label="备选项 A"></fx-checkbox>
            <fx-checkbox label="备选项 B" disabled></fx-checkbox>
            <fx-checkbox label="备选项 C"></fx-checkbox>
            <fx-checkbox label="备选项 D"></fx-checkbox>
            <fx-checkbox label="备选项 E"></fx-checkbox>
          </fx-checkbox-group>
        </fx-form-item>
        <fx-form-item label="选择" prop="checkbox">
          <fx-checkbox label="是否选中" v-model="rulesFormData.checkbox"></fx-checkbox>
        </fx-form-item>
        <fx-form-item label="单选" prop="radio">
          <fx-radio v-model="rulesFormData.groupRadio" label="1">备选项1</fx-radio>
          <fx-radio v-model="rulesFormData.groupRadio" label="2">备选项2</fx-radio>
        </fx-form-item>
        <fx-form-item>
          <fx-button @click="submit">发送</fx-button>
        </fx-form-item>
      </fx-form>
      <template #hide>
        <pre v-highlight="rule2"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { FxMessage, FxNotify } from '@/base'

export default defineComponent({
  name: 'viewForm',
  setup () {
    const baseFormData = reactive({
      input: '',
      checkboxGroup: [],
      checkbox: false,
      groupRadio: ''
    })
    const alignFormData = reactive({
      input: '',
      checkboxGroup: [],
      checkbox: false,
      groupRadio: ''
    })
    const rulesFormData = reactive({
      input: '',
      inputNumber: 1,
      checkboxGroup: [],
      checkbox: false,
      groupRadio: ''
    })
    const alignType = ref<'left' | 'right' | 'top'>('left')
    const formDom = ref()
    const labelWidth = ref<number>(50)

    const test = (): Promise<boolean> => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.5 ? resolve(true) : reject('测试异步函数报错')
        }, 1000)
      })
    }

    const rules = reactive({
      input: [
        {
          required: true,
          message: '输入框不能为空',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 6,
          message: '字符串长度必选在3-6个之间',
          trigger: 'blur'
        },
        {
          message: '异步验证未通过',
          trigger: 'blur',
          validator: async (val: string, callback: (val: Error | void | string) => void): Promise<void> => {
            try {
              await test()
              callback()
            } catch (e) {
              callback(e)
            }
          }
        }
      ],
      inputNumber: {
        min: 8,
        max: 60,
        message: '数字必须在8-60之间',
        trigger: 'blur',
        type: 'Number'
      },
      checkboxGroup: [
        {
          required: true,
          message: '必须选择',
          type: 'Array'
        },
        {
          min: 2,
          max: 4,
          message: '至少选择2个,最多选择4个',
          type: 'Array'
        }
      ],
      checkbox: {
        required: true,
        message: '必须勾选',
        type: 'Boolean'
      },
      radio: [
        {
          required: true,
          message: '必选选择一个'
        }
      ]
    })

    const baseSend = () => {
      FxNotify({
        message: JSON.stringify(baseFormData),
        title: '发送的内容',
        duration: 0,
        showClose: true
      })
    }
    const submit = () => {
      if (formDom.value) {
        formDom.value.validator((val: boolean) => {
          FxNotify({
            message: JSON.stringify(rulesFormData).replace(',', ',\n'),
            title: '发送的内容',
            duration: 0,
            showClose: true
          })
          FxMessage({
            message: val ? '验证成功' : '验证失败',
            type: val ? 'success' : 'error'
          })
        })
      }
    }

    const base = `<fx-form>
  <fx-form-item label="输入框" prop="input">
    <fx-input v-model="baseFormData.input"></fx-input>
  </fx-form-item>
  <fx-form-item label="多选" prop="checkboxGroup">
    <fx-checkbox-group v-model="baseFormData.checkboxGroup">
      <fx-checkbox label="备选项 A"></fx-checkbox>
      <fx-checkbox label="备选项 B" disabled></fx-checkbox>
      <fx-checkbox label="备选项 C"></fx-checkbox>
      <fx-checkbox label="备选项 D"></fx-checkbox>
      <fx-checkbox label="备选项 E"></fx-checkbox>
    </fx-checkbox-group>
  </fx-form-item>
  <fx-form-item label="选择" prop="checkbox">
    <fx-checkbox label="是否选中" v-model="baseFormData.checkbox"></fx-checkbox>
  </fx-form-item>
  <fx-form-item label="单选" prop="radio">
    <fx-radio v-model="baseFormData.groupRadio" label="1">备选项1</fx-radio>
    <fx-radio v-model="baseFormData.groupRadio" label="2">备选项2</fx-radio>
  </fx-form-item>
  <fx-form-item>
    <fx-button>发送</fx-button>
  </fx-form-item>
</fx-form>`
    const align = `<fx-radio-group v-model="alignType">
  <fx-radio-button label="left">靠左对齐</fx-radio-button>
  <fx-radio-button label="right">靠右对齐</fx-radio-button>
  <fx-radio-button label="top">靠上对齐</fx-radio-button>
</fx-radio-group>
<fx-slider v-model="labelWidth" width="300"/>
<fx-form :label-position="alignType">
        <fx-form-item label="输入框" prop="input">
          <fx-input v-model="alignFormData.input"></fx-input>
        </fx-form-item>
        <fx-form-item label="多选" prop="checkboxGroup">
          <fx-checkbox-group v-model="alignFormData.checkboxGroup">
            <fx-checkbox label="备选项 A"></fx-checkbox>
            <fx-checkbox label="备选项 B" disabled></fx-checkbox>
            <fx-checkbox label="备选项 C"></fx-checkbox>
            <fx-checkbox label="备选项 D"></fx-checkbox>
            <fx-checkbox label="备选项 E"></fx-checkbox>
          </fx-checkbox-group>
        </fx-form-item>
        <fx-form-item label="选择" prop="checkbox">
          <fx-checkbox label="是否选中" v-model="alignFormData.checkbox"></fx-checkbox>
        </fx-form-item>
        <fx-form-item label="单选" prop="radio">
          <fx-radio v-model="alignFormData.groupRadio" label="1">备选项1</fx-radio>
          <fx-radio v-model="alignFormData.groupRadio" label="2">备选项2</fx-radio>
        </fx-form-item>
        <fx-form-item>
          <fx-button>发送</fx-button>
        </fx-form-item>
      </fx-form>

export default defineComponent({
    setup() {
        const baseFormData = reactive({
          input: '',
          checkboxGroup: [],
          checkbox: false,
          groupRadio: ''
        })
        const alignType = ref<'left' | 'right' | 'top'>('left')

        return {
            baseFormData,
            alignType
        }
    }
})`
    const rule = `<fx-form :rules="rules" ref="formDom">
  <fx-form-item label="输入框" prop="input">
    <fx-input v-model="rulesFormData.input"></fx-input>
  </fx-form-item>
  <fx-form-item label="数字框" prop="inputNumber">
    <fx-input-number v-model="rulesFormData.inputNumber"></fx-input-number>
  </fx-form-item>
  <fx-form-item label="多选" prop="checkboxGroup">
    <fx-checkbox-group v-model="rulesFormData.checkboxGroup">
      <fx-checkbox label="备选项 A"></fx-checkbox>
      <fx-checkbox label="备选项 B" disabled></fx-checkbox>
      <fx-checkbox label="备选项 C"></fx-checkbox>
      <fx-checkbox label="备选项 D"></fx-checkbox>
      <fx-checkbox label="备选项 E"></fx-checkbox>
    </fx-checkbox-group>
  </fx-form-item>
  <fx-form-item label="选择" prop="checkbox">
    <fx-checkbox label="是否选中" v-model="rulesFormData.checkbox"></fx-checkbox>
  </fx-form-item>
  <fx-form-item label="单选" prop="radio">
    <fx-radio v-model="rulesFormData.groupRadio" label="1">备选项1</fx-radio>
    <fx-radio v-model="rulesFormData.groupRadio" label="2">备选项2</fx-radio>
  </fx-form-item>
  <fx-form-item>
    <fx-button @click="submit">发送</fx-button>
  </fx-form-item>
</fx-form>`
    const rule2 = rule + `

export default defineComponent({
    setup() {
        const rulesFormData = reactive({
          input: '',
          inputNumber: 1,
          checkboxGroup: [],
          checkbox: false,
          groupRadio: ''
        })

        const test = (): Promise<boolean> => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              Math.random() > 0.5 ? resolve(true) : reject('测试异步函数报错')
            }, 1000)
          })
        }

        const rules = reactive({
          input: [
            {
              required: true,
              message: '输入框不能为空',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 6,
              message: '字符串长度必选在3-6个之间',
              trigger: 'blur'
            },
            {
              message: '异步验证未通过',
              trigger: 'blur',
              validator: async (val: string, callback: (val: Error | void | string) => void): Promise<void> => {
                try {
                  await test()
                  callback()
                } catch (e) {
                  callback(e)
                }
              }
            }
          ],
          inputNumber: {
            min: 8,
            max: 60,
            message: '数字必须在8-60之间',
            trigger: 'blur',
            type: 'Number'
          },
          checkboxGroup: [
            {
              required: true,
              message: '必须选择',
              type: 'Array'
            },
            {
              min: 2,
              max: 4,
              message: '至少选择2个,最多选择4个',
              type: 'Array'
            }
          ],
          checkbox: {
            required: true,
            message: '必须勾选',
            type: 'Boolean'
          },
          radio: [
            {
              required: true,
              message: '必选选择一个'
            }
          ]
        })
        const submit = () => {
          if (formDom.value) {
            formDom.value.validator((val: boolean) => {
              console.log(val)
            })
          }
        }
        return {
            rulesFormData,
            rules,
            submit
        }
    }
})`

    return {
      rules,
      formDom,
      baseFormData,
      alignFormData,
      rulesFormData,
      alignType,
      base,
      align,
      labelWidth,
      rule2,
      baseSend,
      submit
    }
  }
})
</script>

<style scoped lang="scss">
.form {
}
</style>
